<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>表单标签</h2>
    <div>
        <input type="text" placeholder="外部的按钮">
    </div>
    <!-- form 就是一个容器 -->
    <form action="https://www.baidu.com">
        <!-- input
            通过type设置不同的外观 
        -->
            <div>
            <input name="username" type="text" placeholder="输入用户名">
            </div>
            <div>
            <input name="password" type="password" placeholder="输入密码">
            </div>
            <div>
                <!-- 相同的name 让浏览器知道是一组 -->
                 <!-- label for 关联指定标签的id属性，可以实现点字，等同于点标签 -->
                  <label for="boy">男</label>
                <input id="boy" type="radio" name="male">
                  <label for="girl">女</label>
                  <input id="girl" type="radio" name="male">
                  <label for="secret">未知</label>
                  <input id="secret" type="radio" name="male">
            </div>
            <div>
                <!-- value 获取到的是数据，label中放置的是给用户看的数据 -->
                <label for="basketball">篮球</label>
                <input type="checkbox" id="basketball" value="1">
                <label for="sing">唱</label>
                <input type="checkbox" id="sing" value="2">
                <label for="dance">跳</label>
                <input type="checkbox" id="dance" value="3">
                <label for="rap">rap</label>
                <input type="checkbox" id="rap" value="4">
            </div>
            <div>
                <!-- 文本域 -->
                <textarea placeholder="个性签名" name="" id=""></textarea>
            </div>
            <div>
                <!-- type 设置按钮的类型
                    button 默认
                    submit 提交，可以结合form表单 提交数据到指定的URL地址,
                    如果需要提交，需要给表单元素设置name属性name等同于key
                    reset 重置表单，重置的是，所在form标签内部的元素
                -->
                <button type="submit">提交</button>
                <button type="reset">重置</button>
            </div>
    </form>


    <h2>度百度搜素引擎</h2>
    <!-- 自己写个搜素引擎 -->
     <form action="https://www.baidu.com/s">
        <input type="text" placeholder="亲自输入查询的内容" name="wd">
        <button type="submit">去搜素</button>
     </form>

     <h2>淘宝</h2>
    <!-- 自己写个搜素引擎 -->
     <form action="https://www.taobao.com/">
        <input type="text" placeholder="亲自输入查询的内容" name="">
        <button type="submit">去搜素</button>
     </form>
</body>
</html>